<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>申请人资料</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/common.css" />
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			body {
				background-color: #FFFFFF;
			}
			.mui-content {
				background-color: #FFFFFF;
			}
			.empty-data-container {
				display: none;
				width: 100%;
				text-align: center;
			}
			.empty-img {
				width: 146px;
				height: 119px;
				margin-top: 60px;
			}
			.empty-data-container .tips {
				font-family: 'PingFangSC-Regular';
				font-size: 16px;
				color: #999999;
				margin-top: 25px;
			}
			.add-applicant-div {
				margin-top: 20px;
				text-align: center;
			}
			.add-btn {
				width: 200px;
				height: 45px;
				background-color: #5BA9F9;
				border-radius: 4px;
				font-family: 'PingFangSC-Medium';
				font-size: 18px;
				color: #FFFFFF;
			}
			.hava-data-container {
				/*display: none;*/
				width: 100%;
				margin-top: 10px;
			}
			.hava-data-container .tips {
				font-family: 'PingFangSC-Regular';
				font-size: 14px;
				color: #999999;
				margin-left: 20px;
			}
			.mui-table-view {
				margin-top: 10px;
				margin-bottom: 70px;
			}
			.header-img {
				width: 44px;
				height: 44px;
				vertical-align: middle;
			}
			.mui-navigate-right span {
				margin-left: 10px;
				font-family: 'PingFangSC-Regular';
				font-size: 20px;
				color: #4C4C4C;
			}
			.mui-popup {
				border-radius: 4px;
			}
			.mui-popup-inner {
				border-radius: 4px 4px 0 0;
			}
			.mui-popup-text {
				font-family: 'PingFangSC-Regular';
				font-size: 18px;
				color: #333333;
			}
			.cancle-color {
				font-family: 'PingFangSC-Regular';
				font-size: 18px;
				color: #CCCCCC;
			}
			.confirm-color {
				font-family: 'PingFangSC-Regular';
				font-size: 18px;
				color: #FFFFFF;
				padding: 0px;
				background-color: #5BA9F9;
			}
			.mui-popup-button:first-child {
			    border-radius: 0 0 0 4px;
			}
			.mui-popup-button:last-child {
			    border-radius: 0 0 4px;
			}
			.line-div {
				width: 100%;
				height: 1px;
				background-color: #F3F3F3;
			}
			.input-div {
				width: 100%;
				padding: 15px 0px;
				background-color: #FFFFFF;
			}
			input[type=text] {
				width: 80%;
				margin-bottom: 0px;
				padding: 10px;
				border-radius: 0px;
				font-family: 'PingFangSC-Regular';
				font-size: 18px;
				color: #CCCCCC;
			}
			.applyId-span {
				display: none;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">申请人资料</h1>
		</header>
		<div class="mui-content">
			<div class="empty-data-container">
				<img class="empty-img" src="../img/applicant/empty_bg.png" />
				<div class="tips">还没有申请人哦！赶快去申请吧！</div>
				<div class="add-applicant-div">
					<button class="add-btn">添加申请人    ＋</button>
				</div>
			</div>
			<div class="hava-data-container">
				<div class="tips">完善个人申请资料可节省80%的办理时间 </div>
				<ul class="mui-table-view">
					<!--<li class="mui-table-view-cell">
						<div class="mui-slider-right mui-disabled">
							<a class="mui-btn mui-btn-red">删除</a>
						</div>
						<a class="mui-navigate-right">
							<img class="header-img" src="../img/applicant/header_icon.png" />
							<span>Item 1</span>
						</a>
					</li>-->
				</ul>
				<div class="add-applicant-div">
					<button class="add-btn">添加申请人    ＋</button>
				</div>
			</div>
			<div class="modal-backdrop">
				<div class="mui-popup mui-popup-in">
					<div class="link-div"></div>
					<div class="mui-popup-inner">
						<div class="mui-popup-text">新增申请人</div>
					</div>
					<div class="line-div"></div>
					<div class="input-div">
						<input id="name" type="text" class="form-control" placeholder="请输入您的姓名"/>
					</div>
					<div class="mui-popup-buttons">
						<span class="mui-popup-button mui-popup-button-bold cancle-color">取消</span>
						<span class="mui-popup-button mui-popup-button-bold confirm-color">确定</span>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script type="text/javascript">
		mui.init();
		var customerId = base.getParameter("customerId");
		var btnArray = ['确认', '取消'];
		(function($) {
			getVisaApplyCustomerList();
			$('.mui-table-view').on('tap', '.mui-btn', function(event) {
				var elem = this;
				var li = elem.parentNode.parentNode;
				var _applyCustomerId = jQuery(elem).closest('.mui-table-view-cell').find('.applyId-span').text();
				mui.confirm('确认删除该条记录？', '重要提示', btnArray, function(e) {
					if (e.index == 0) {
						base.postData(base.url.delVisaApplyCustomerInfo,{applyCustomerId: _applyCustomerId},function(data) {
							if (data.success) {
								li.parentNode.removeChild(li);
							} else {
								setTimeout(function() {
									$.swipeoutClose(li);
								}, 0);
							}
						})
					} else {
						setTimeout(function() {
							$.swipeoutClose(li);
						}, 0);
					}
				});
			});
		})(mui);
		function getVisaApplyCustomerList() {
			base.setWait('正在获取数据');
			var url = base.url.getVisaApplyCustomerList;
			var data = {
				customerId: customerId
			};
			base.postData(url,data,getVisaApplyCustomerListSuccess);
		}
		function getVisaApplyCustomerListSuccess(data) {
			if (data.success) {
				var list = data.extendData.applyCustomerList||[];
				var html = '';
				if (list.length>0) {
					for (var index in list) {
						html+= getListItem(list[index]);
					}
				} else {
					$('.hava-data-container').hide();
					$('.empty-data-container').show();
				}
				$('.mui-table-view').html(html);
			} else {
				mui.toast(data.message);
			}
		}
		function getListItem(item) {
			var html = '';
			html += '<li class="mui-table-view-cell">'
			html += 		'<div class="mui-slider-right mui-disabled">'
			html += 			'<a class="mui-btn mui-btn-red">删除</a>'
			html += 		'</div>'
			html += 	'	<a class="mui-navigate-right mui-slider-handle">'
			html += 		'	<span class="applyId-span">'+item.applyCustomerId+'</span>'
			html += 		'	<img class="header-img" src="../img/applicant/header_icon.png" />'
			html += 		'	<span>'+item.applyCustomerName+'</span>'
			html += 	'	</a>'
			html += '</li>'
			return html;
		}
		//确定添加
		$(".mui-popup-buttons").on("tap", ".confirm-color", function() {
			var data = {
				customerId: customerId,
				applyCustomerName: $('#name').val()
			};
			base.postData(base.url.addVisaApplyCustomerInfo,data,addVisaApplyCustomerInfoSuccess);
		})
		function addVisaApplyCustomerInfoSuccess(data) {
			$(".modal-backdrop").hide();
			if (data.success) {
				getVisaApplyCustomerList();
			} else {
				mui.toast(data.message);
			}
		}
		//点击添加申请人，弹出弹框
		$(".add-applicant-div").on("tap", ".add-btn", function() {
			$(".modal-backdrop").show();
		})
		//取消新建，关闭弹框
		$(".mui-popup-buttons").on("tap", ".cancle-color", function() {
			$(".modal-backdrop").hide();
		})
		//点击进入到申请人资料页
		$(".mui-table-view").on("tap", ".mui-navigate-right", function() {
			var _applyCustomerId = $(this).find('.applyId-span').text();
			window.location.href = "personInfo.html?customerId="+customerId+"&applyCustomerId="+_applyCustomerId;
		})
	</script>
</html>